.navigation__item {
  border-radius: 20px;
}

.navigation__item a {
  border: 1px solid #d1d1d1;
  /* 较浅的边框颜色 */
  color: #333;
  /* 深色文本 */
  background-color: #ffffff;
  /* 白色背景 */
  border-radius: 10px;
  /* 圆角边框 */
  padding: 10px 15px;
  /* 内边距 */
  height: 100%;
  transition: background-color 0.3s, box-shadow 0.3s;
  /* 添加过渡效果 */
}

/* 悬停效果 */
.navigation__item a:hover {
  background-color: #f0f0f0;
  /* 悬停时的背景颜色 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* 添加阴影效果 */
}

.panel-cover {
  width: 100%;
  height: 100%;
  background-position: center center;
  object-fit: cover;
}

.root {
  object-fit: cover;
}

.project-body {
  display: flex;
  justify-content: left;
  align-items: center;
}

.project-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  border: 0.1px solid rgba(255, 255, 255, 0.9);
}

.project-title {
  text-align: left;
  padding-left: 8px;
}

.name {
  font-weight: bold;
  color: black;
}

.profile {
  color: black;
  display: flex;
  text-align: left;
  font-size: 12px;
  margin-top: 5px;
  margin-bottom: 0;
  max-width: 300px;
}

.project-screen {
  margin-top: 5px;
  opacity: 0;
  /* 1显示 0隐藏*/
  transition: opacity 0.3s;
  max-height: 0;
  overflow: hidden;
}

.view-screen {
  display: inline-table;
  text-align: center;
  margin-top: 15px;
  cursor: pointer;
  transition: transform 0.3s ease;
  /* 添加过渡效果 */
}

.view-screen.rotate {
  transform: rotate(180deg);
  /* 旋转 180 度 */
}

.navigation__item a .project-screen {
  transition: opacity 0.3s, max-height 0.3s;
}

.screen {
  width: 300px;
  height: 160px;
  border-radius: 15px;
  object-fit: cover;
}

.tags {
  margin-top: 3px;
}

.tag {
  color: white;
  padding: 2px 5px;
  font-size: 8px;
  font-weight: 750;
  border-radius: 3px;
}

.tags span:nth-child(1) {
  background-color: #4460ef;
}

.tags span:nth-child(2) {
  background-color: #7009b6;
}

.tags span:nth-child(3) {
  background-color: #f72586;
}

.tags span:nth-child(4) {
  background-color: #e3a645;
}

.tags span:nth-child(5) {
  background-color: #f72525;
}

.technologys {
  margin-top: 5px;
  border-radius: 3px;
}

.technologys span {
  border-radius: 2px;
  padding: 1px 5px;
  font-size: 8px;
  font-weight: 100;
  background-color: #11191f;
  color: white;
  text-align: center;
}

.open-button {
  display: flex;
  height: 38px;
  margin-top: 10px;
  border: 1px solid #cac9c9;
  background-color: #efefefe0;
  border-radius: 10px;
  text-align: center;
  justify-content: center;
  align-items: center;
  font-size: 10px;
  font-weight: 500;
  color: black;
}

.toggle-button {
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  opacity: 0;
  display: none;
  height: 0;
}

.toggle-button .open-button {
  height: 32px;
  padding: 0 10px;
  color: black;
  background-color: #dadada;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 500;
}

@keyframes shake {
  0% {
    transform: rotate(0deg) scale(1) translateX(0);
  }

  25% {
    transform: rotate(-10deg) scale(1.05) translateX(-1px);
  }

  50% {
    transform: rotate(10deg) scale(1) translateX(1px);
  }

  75% {
    transform: rotate(-10deg) scale(0.95) translateX(-1px);
  }

  100% {
    transform: rotate(0deg) scale(1) translateX(0);
  }
}

.panel-cover__subtitle .shake {
  display: inline-block;
  /* 使动画生效 */
  animation: shake 1s ease-in-out 1 forwards;
  /* 动画持续时间设置为 1 秒，执行一次 */
  animation-delay: 0s;
  /* 动画开始时无延迟 */
  animation-fill-mode: forwards;
  /* 保持最后的状态 */
}

.panel-cover__subtitle .shake:after {
  content: "";
  /* 创建一个伪元素 */
  display: inline-block;
  /* 使其成为行内块元素 */
  animation: none;
  /* 初始状态不执行动画 */
  animation-delay: 5s;
  /* 延迟 5 秒 */
  animation: shake 1s ease-in-out 1 forwards;
  /* 执行一次 */
}

body {
  overflow: hidden;
  /* 防止滚动条出现 */
  margin: 0;
  /* 去掉默认边距 */
}

.project-list {
  width: 90%;
  display: flex;
  flex-wrap: wrap;
  /* 允许换行 */
  justify-content: center;
  margin: 0 auto;
  /* 居中对齐 */
}

.project-list .navigation__item {
  margin: 5px;
  /* 设置间距 */
  box-sizing: border-box;
  /* 包含边框和内边距 */
  display: flex;
  /* 使用 flexbox 布局 */
  flex-direction: column;
  /* 垂直排列内容 */
  justify-content: space-between;
  /* 在项目之间分配空间 */
}

.project-screen-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}